<template>
    <div>
      <div>
        <ul>
          <li v-for="(item, index) in arr" :key="index">
            {{ item }}
          </li>
        </ul>
      </div>
  
      <div>
        <ul>
          <li v-for="(item, index) in stuArr" :key="index">
            <span>{{ item.id }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.sex }}</span>
            <span>{{ item.hobby }}</span>
          </li>
        </ul>
      </div>
      <div>
        <p v-for="(value, key) in tObj" :key="key">
          <span>{{ value }}</span>
          ========
          <span>{{ key }}</span>
          <span>{{value.count}}</span>
        </p>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        arr: ["小明", "小欢欢", "大黄"],
        stuArr: [
          {
            id: 1001,
            name: "孙悟空",
            sex: "男",
            hobby: "吃桃子",
          },
          {
            id: 1002,
            name: "猪八戒",
            sex: "男",
            hobby: "背媳妇",
          },
        ],
        tObj: {
          name: "小黑",
          age: 18,
          class: "1期",
        },
        count: 10,
      };
    },
  };
  </script>